<!-- /*
 * @Author: 谢力 843926058@qq.com
 * @Date:   2019-11-06
 * @Last Modified by:   谢力
 * @Last Modified time: 2019-11-07
 */ -->
<template>
  <div class="ui-mode-container flex1 flex-col">
    <div class="ui-mode-content flex1">
      <!-- 从以下所标识单元开始到单元结束，根据每个项目主页面数量决定，如果有四个主页面就放四个，以此类推 -->
      <!-- 单元开始 -->
      <div class="ui-mode-box" :style="{display:index==0?'block':'none'}">
        <inner-home v-if="menu[0].flag"></inner-home>
      </div>
      <!-- 单元结束 -->
      <div class="ui-mode-box" :style="{display:index==1?'block':'none'}">
        <inner-category ref="category" v-if="menu[1].flag"></inner-category>
      </div>
      <div class="ui-mode-box" :style="{display:index==2?'block':'none'}">
        <inner-book v-if="menu[2].flag"></inner-book>
      </div>
      <div class="ui-mode-box" :style="{display:index==3?'block':'none'}">
        <inner-my v-if="menu[3].flag"></inner-my>
      </div>
      <div class="ui-mode-box" :style="{display:index==4?'block':'none'}">
        <inner-share v-if="menu[4].flag"></inner-share>
      </div>
    </div>
    <!-- 底部Tab栏的样式在@/assets/css/main.less进行调整 -->
    <!-- 底部Tab栏的图片在路径@/assets/images/menu进行替换 -->
<!--    <div class="ui-nav-item flex-row align-stretch">
      <div class="button flex1 flex-col align-center"
           :key="i"
           v-for="(item,i) in menu"
           :class="{active:index==i}"
           @click="handleChangeTab(i)">
        <em :class="`m${i+1}`"></em>
        <span>{{ item.title }}</span>
      </div>
    </div>-->
  </div>
</template>
<script>
import mixinCommon from '@/views/content/mixins/common';
import mixinRequest from '@/views/content/mixins/request';
import menuData from '@/assets/data/menu';
import innerHome from './home/index';
import innerCategory from './category/index';
import innerBook from './book/index';
import innerMy from './my/index';
import innerShare from './share/index';
import mixinShare from './mixins/share';
import {
  goLogin,
} from '@/utils/tool';

export default {
  name: 'front_page_index',
  data() {
    return {
      index: null,
      // 根据每个项目主页面数量决定，如果有四个主页面就放四个，以此类推
      menu: [
        {
          flag: false,
          title: '首页',
          login: false
        },
        {
          flag: false,
          title: '品类',
          login: true
        },
        {
          flag: false,
          title: '账本',
          login: true
        },
        {
          flag: false,
          title: '我的',
          login: true
        },
        {
          flag: false,
          title: '分享',
          login: true
        }
      ]
    };
  },
  components: {
    innerHome,
    innerCategory,
    innerBook,
    innerMy,
    innerShare,
    mixinCommon,
    mixinRequest
  },
  mixins: [
    mixinShare
  ],
  computed: {
    getRedirectKey() {
      // 根据每个项目主页面数量决定，如果有四个主页面就放四个，以此类推
      return {
        home: 0,
        category: 1,
        book: 2,
        my: 3,
        share: 4
      };
    },
    getIndex() {
      let index = this.getRedirectKey[this.$route.query.redirect];
      if (index == undefined) {
        index = 0;
      }
      ;
      return index;
    }
  },
  watch: {
    resourceLoaded: {
      handler(flag) {
        this.$nextTick(this.init)
      },
      immediate: true
    },
    getIndex() {
      this.handleChangeTab(this.getIndex);
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    /*
     * 初始化
     */
    init() {
      this.$http.post({
        name:'my',
        data:{
          invoke_method:'user_and_shop_info'
        },
        loading:{
          enabled:false
        }
      }).then(({result,response}) => {
        if (response.status == 0) {
          if (result.public_user_info && result.public_user_info.user_phone != 'x-teamer') {
            this.public_agent_info = result.public_agent_info || {};
            this.public_user_info = result.public_user_info || {};
            document.title = this.public_agent_info.application_name;
            this.setState({
              key: 'public_agent_info',
              value: this.public_agent_info
            });
            this.setState({
              key: 'public_user_info',
              value: this.public_user_info
            });
            this.setLoginStatus({
              status: true,
              token: `${result.token_type} ${result.access_token}`,
              expires: result.token_expires_time
            });
            this.getMenuList().then(() => {
              this.setUserInfo(this.public_user_info);
              this.$root.$children[0].$children[0].refresh(() => {
                this.handleChangeTab(this.getIndex);
              });
            }).catch(({msg}) => {
              this.showMessage(msg);
            });
          } else {
            this.handleChangeTab(this.getIndex);
          }
        } else if (response.status == 999201) {
          this.handleMockLogin().then(() => {
            this.handleChangeTab(this.getIndex);
          })
        }
      })
    },
    /*
     * APP和H5使用特殊账号模拟登录 H5即非APP&非微信&非小程序,默认即H5
     */
    handleMockLogin() {
      return new Promise((resolve, reject) => {
        if (!this.isLogin && (this.isAPP || (!this.isAPP && !this.isWeixin && !this.isMiniProgram))) {
          this.$http.post({
            name: 'login',
            data: {
              invoke_method: 'login_by_password',
              pre_cmd_para_need_pic_code: false,
              user_phone: 'x-teamer',
              password_user: 'jlt110',
              pre_cmd_para_force_login_again: true,
              ziying_id_public_agent_info: 301272,
              suoding_id_public_agent_info: 99201
            },
            loading: {
              enabled: false
            }
          }).then(({result, response}) => {
            resolve({result, response});
          }).catch(({msg}) => {
            reject({msg});
          });
        } else {
          resolve();
        }
        ;
      });
    },
    /*
     * 获取菜单
     */
    getMenuList() {
      return new Promise((resolve, reject) => {
        let result = menuData.returnData;
        this.setMenuList(result.list);
        resolve(result.list);
      });
    },
    /*
     *  tab切换
     */
    handleChangeTab(i) {
      if (i != this.index) {
        this.index = i;
        if (!this.menu[this.index].flag) {
          this.menu[this.index].flag = !this.menu[this.index].flag;
        }
        ;
        this.initBridgeShare();
        this.goRedirect();
      }
      ;
    },
    /*
     * 跳转redirect
     */
    goRedirect() {
      let redirect = {};
      Object.keys(this.getRedirectKey).forEach(key => {
        redirect[this.getRedirectKey[key]] = key;
      });
      if (!(this.$route.query.redirect && this.$route.query.redirect == redirect[this.index])) {
        let query = {
          redirect: redirect[this.index]
        };
        if (this.index == 2) {
          query.index = 0;
        } else if (this.index == 1) {
          this.isLogin && this.$refs.category && this.$refs.category.goRedirect();
        }
        ;
        this.$router.push({
          path: '/front_page_index',
          query: query
        });
      }
      ;
      this.$nextTick(() => {
        if (this.menu[this.index].login && !this.isLogin) {
          goLogin(this.$route);
        }
        ;
      });
    }
  },
  beforeDestroy() {
  }
}
</script>
<style lang="less" scoped>
</style>
